<template>
  <div id="common-layout">
    <div id="menus">
      <el-row class="el-row">
        <el-col :span="24" class="el-col">
          <el-menu class="el-menu-vertical-demo" text-color="#fff" background-color="#304156" unique-opened="true"
            router :collapse="data.collapse" @click="menuitem">
            <el-menu-item index="1" class="div">
              <img src='https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png' />
              <span>imooc-admin</span>
            </el-menu-item>
            <el-menu-item index="/profile">
              <el-icon>
                <Avatar />
              </el-icon>
              <span>个人中心</span>
            </el-menu-item>
            <el-menu-item index="/chart">
              <el-icon>
                <Histogram />
              </el-icon>
              <span>数据可视化</span>
            </el-menu-item>
            <el-sub-menu index="/manage" style="background: #304156; ">
              <template #title>
                <el-icon>
                  <Avatar />
                </el-icon>
                <span>用户</span>
              </template>
              <el-menu-item-group style="background: #304156;">
                <el-menu-item index="/manage"><span class="icon iconfont icon-yuangongguanli"
                    style="margin-right:10px;"></span>员工管理</el-menu-item>
                <el-menu-item index="/role"><span class="icon iconfont icon-permissions-list"
                    style="margin-right:10px;"></span>角色列表</el-menu-item>
                <el-menu-item index="/permission"><span class="icon iconfont icon-quanxianguanli"
                    style="margin-right:10px;"></span>权限列表</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="4" style="background: #304156; ">
              <template #title>
                <el-icon>
                  <Document />
                </el-icon>
                <span>文章</span>
              </template>
              <el-menu-item-group style="background: #304156;">
                <el-menu-item index="/ranking"><span class="icon iconfont icon-wenzhangpailie-"
                    style="margin-right:10px;"></span>文章排名</el-menu-item>
                <el-menu-item index="/create"><span class="icon iconfont icon-yly_bianji"
                    style="margin-right:10px;"></span>创建文章</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <div class="body">
      <div class="top">
        <div class="navbar">
          <div class="left">
            <el-icon @click="menus" :size="28" style="margin: 10px;">
              <Expand />
            </el-icon>
            <el-breadcrumb style="height: 100%; line-height: 50px;">
              <el-breadcrumb-item>{{ data.title }}</el-breadcrumb-item>
            </el-breadcrumb>
            <div id="full_screen">
              <span :class="screen ? 'icon iconfont icon-quanjufangda' : 'icon iconfont icon-quanjusuoxiao'"
                style="margin-right:10px;"></span>
            </div>
          </div>
          <div class="right">
            <img ref="buttonRef" src='https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png'
            @click-outside="onClickOutside" class="tui">
            <el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" virtual-triggering>
              <el-button @click="tui">退出</el-button>
            </el-popover>
          </div>
        </div>
        <div class="tags-view-container">
          <el-tag @close="close(index)" class="mx-1" type="info" v-for="(item, index) in data.items" :key="index"
            effect="dark" closable>{{ item.title }}</el-tag>
        </div>
      </div>
      <div class="celter">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed, watch, getCurrentInstance,unref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import screenfull from "screenfull"
const store = useStore()
const router = useRouter()
const data = reactive({
  collapse: false,
  title: '',
  items: []
})
let screen = true
const menus = () => {

  if (!data.collapse) {
    // console.log(data.collapse);
    data.collapse = true
  } else if (data.collapse) {
    // console.log(data.collapse);
    data.collapse = false
  }

}
const tui=()=>{
    router.go(-1)
    localStorage.removeItem('store')
}
const close = (i) => {
  console.log(i);
  data.items.splice(i, 1)
  //   window.location.href="about:blank";
  // window.close();
}
const menuitem = (val) => {
  data.title = (val.target).innerText
  data.items.push(
    {
      title: (val.target).innerText
    }
  )
  // data.items.forEach(item=>{
  //   if(item.title)
  //     console.log(item.title);
  // })
  // console.log(val);
}
const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}
onMounted(() => {
  let menulist = store.state.menuList.permission.menus
  const element = document.getElementById("common-layout")
  document.getElementById("full_screen").addEventListener("click", () => {
    if (screen) {
      screenfull.request(element); // 元素全屏
      screen = false
      console.log('123', screen);
    }
    else if (!screen) {
      screenfull.exit(); // 退出全屏
      screen = true
      console.log('456', screen);

    }
  });
  // console.log(menulist);
});


</script>

<style lang='scss' scoped>
#common-layout {
  width: 100%;
  height: 100%;
  display: flex;
  .tui{
    width: 50px;
    height: 50px;
    margin-right: 30px;
  }
  #menus {
    background: #304156;

    .el-col {
      .div {
        // width: 100%;
        line-height: 50px;
        // margin-top: 10px;
        padding: 10px 20px;
        color: #fff;
        background: #304156;

        img {
          width: 45px;
          height: 45px;
          float: left;
          // margin-left: 40px;
        }

        span {
          font-size: 18px;
          font-weight: 800;
          margin-left: 10px;
        }
      }
    }
  }

  .body {
    background: hotpink;
    width: 100%;
    height: 100%;

    .top {
      width: 100%;
      height: 85px;

      // background: green;
      .navbar {
        width: 100%;
        height: 50px;
        background: aqua;
        display: flex;
        justify-content: space-between;
        line-height: 50px;

        .left {
          display: flex;
          line-height: 50px;
        }

        // .right {}
      }

      .tags-view-container {
        width: 100%;
        height: 32px;
        background: gold;
        box-shadow: 0 1px 10px rgb(87, 87, 87);

        .mx-1:hover {
          cursor: pointer
        }
      }
    }
  }
}
</style>

